<template>
	<view class="view">
		<custom-news-list-item :item="news"></custom-news-list-item>
		<view class="qrcode">
			<canvas canvas-id="qrcode" style="width:177px;height:177px;margin:10rpx auto;"></canvas>
			<view class="qrcode_tip">{{ i18n('请确保周围环境安全，再使用') }}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			news: {},
			newsId: ''
		};
	},
	onShow() {
		this.boolLogin()
	},
	onLoad(ops) {
		let that = this;
		this.newsId = ops.id;
		this.boolLogin().then(() => {
			that.getNewsDetail();
			let url = '/pages/index/view?id=' + that.newsId;
			that._plugins.uQRCode
				.make({
					canvasId: 'qrcode',
					componentInstance: that,
					text: url,
					size: 177,
					margin: 10,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: that._plugins.uQRCode.errorCorrectLevel.H
				})
				.then(res => {
					//console.log(res);
				});
		});
	},
	methods: {
		boolLogin(callback) {
			let that = this;
			return new Promise((resolve, reject) => {
				that._plugins
					.boolLogin()
					.then(() => {
						callback && callback();
						resolve();
					})
					.catch(() => {
						uni.navigateTo({
							url: '../login/login'
						});
					});
			});
		},
		i18n(v) {
			return this.$t('index')[v];
		},
		getNewsDetail() {
			let that = this;
			uni.showLoading({
				title: '正在拉取中',
				mask: true,
				complete() {
					that.$store
						.dispatch('getNewsDetail', {
							newsId: that.newsId
						})
						.then(res => {
							that.news = res.data[0];
						})
						.catch(err => {
							console.log(err);
						})
						.finally(() => {
							uni.hideLoading();
						});
				}
			});
		}
	}
};
</script>

<style lang="less">
.view {
	padding: 0 0 200rpx 0;
	.qrcode {
		padding: 10rpx 0;
		margin: 10rpx 0;
		.qrcode_tip {
			color: #c0c0c0;
			text-align: center;
			display: block;
			font-size: 24rpx;
			padding: 20rpx;
		}
	}
}
</style>
